<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- production version, optimized for size and speed -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<script>

</script>

<body>
    <ul id="v-for-object" class="demo">
        <li v-for="value in object">
            {{ value }}
        </li>
    </ul>

    <div v-for="(value, key) in object">
        {{ key }}: {{ value }}
    </div>

    <div v-for="(value, key, index) in object">
        {{ index }}. {{ key }}: {{ value }}
    </div>

    <div v-for="item in items" :key="item.id">
        <!-- content -->
    </div>

    <li v-for="n in evenNumbers">{{ n }}</li>

    <li v-for="n in even(numbers)">{{ n }}</li>

    <div>
        <span v-for="n in 10">{{ n }} </span>
    </div>

    <ul>
        <template v-for="item in items">
            <li>{{ item.msg }}</li>
            <li class="divider"></li>
        </template>
    </ul>

    <script>
        new Vue({
            el: '#v-for-object',
            data: {
                object: {
                    firstName: 'John',
                    lastName: 'Doe',
                    age: 30
                }
            },
            data: {
                numbers: [1, 2, 3, 4, 5]
            },
            computed: {
                evenNumbers: function () {
                    return this.numbers.filter(function (number) {
                        return number % 2 === 0
                    })
                }
            },

            data: {
                numbers: [1, 2, 3, 4, 5]
            },
            methods: {
                even: function (numbers) {
                    return numbers.filter(function (number) {
                        return number % 2 === 0
                    })
                }
            }
        })
        example1.items = example1.items.filter(function (item) {
            return item.message.match(/Foo/)
        })
        var vm = new Vue({
            data: {
                a: 1
            }
        })
        // `vm.a` is now reactive
        vm.b = 2
        // `vm.b` is NOT reactive


    </script>


</body>

</html>